<template>
  <!-- 报名详情 -->
  <div>
    <MainContent title="报名详情" back>
      <template #search-bar>
        <SearchBar inline>
          <template #normal>
            <el-form-item label="唯一标识">
              <el-input
                v-model="tableForm.userUnionId"
                clearable
                placeholder="请输入用户唯一标识"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="手机号">
              <el-input
                v-model="tableForm.phone"
                clearable
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item> -->
            <el-form-item>
                <el-date-picker
                    v-model="time"
                    type="datetimerange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    :default-time="defaultTime"
                    />
            </el-form-item>
            <!-- <el-form-item label="状态">
              <el-select v-model="tableForm.status" class="m-2" placeholder="请输入">
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
          </template>
        </SearchBar>
      </template>
      <!-- url="activity/entryRecordPager" -->
      <!-- :dataList="dataList" -->
      <LayoutTable
        ref="toSiginUpRef"
        :data-list="dataList"
        :total="total"
        :currentPage="tableForm.currentPage"
        :param="tableForm"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        >
        <!-- <el-table-column
            prop="userUnionId"
            label="唯一标识"
            min-width="150"
        ></el-table-column> -->
        <el-table-column
            prop="userUnionId"
            label="唯一标识"
            min-width="150"
        ></el-table-column>

        <el-table-column
            prop="userUnionId"
            label="报名时间"
            min-width="150"
        >
        <template #default="scope">
          <div>
            {{ $filters.dateFormat(scope.row.entryTime) }}
          </div>
        </template>
          
        </el-table-column>

        <el-table-column
            v-for="(item,idx) in tabHeadData"
            :key="idx"
            :prop="`title${idx}`"
            :label="item.name"
            min-width="150"
        ></el-table-column>
        
        <!-- <el-table-column
            prop="entryDetail"
            label="模型名称"
            min-width="150"
        >
        <template #default="scope">
            <div v-for="(item,idx) in scope.row.entryDetail">
                {{item.name}}：{{item.value}}
                <el-table-column
                    :prop="item.value"
                    :label="item.name"
                    min-width="150"
                ></el-table-column>
                <el-table-column label="111">
                    <template #header>
                        {{scope.row.entryDetail}}
                    </template>
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                        >Edit</el-button
                        >
                        <el-button
                        size="small"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                        >Delete</el-button
                        >
                    </template>
                </el-table-column>
            </div>
        </template>
        </el-table-column> -->
        </LayoutTable>
    </MainContent>
  </div>
</template>

<script setup lang="ts">
import {
    getEntryRecordPager,
} from "@/api/activity";
const Route = useRoute();
const dataList = ref([] as any)
const toSiginUpRef = ref()
const total = ref(0)
const time = ref([] as any)
const defaultTime: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
]
const autoSearchInd = ref()
const tableForm = ref({
    userUnionId: "",
    // phone: "",
    actId: Route.params.id,
    showCount: 10,
    currentPage: 1,
    startTime: "" as any,
    endTime: "" as any,
})
const tabHeadData = ref([] as any)
watch(tableForm, () => {
    if (autoSearchInd.value) {
        clearTimeout(autoSearchInd.value);
    }
    autoSearchInd.value = setTimeout(() => {
    getDetailData()
   }, 500);
  
},{ deep: true });

watch(time, (val) => {
  if(val) {
    tableForm.value.startTime = new Date(val[0]).getTime()
    tableForm.value.endTime = new Date(val[1]).getTime()
    
  } else {
    tableForm.value.startTime = ""
    tableForm.value.endTime = ""
  }
});
const handleCurrentChange = (val: any) => {
    tableForm.value.currentPage = val
    
    getDetailData()
}

const handleSizeChange = (val: any) => {
    
    tableForm.value.showCount = val
    getDetailData()
}
const getDetailData = async()=>{
    let rs = await getEntryRecordPager(tableForm.value)
    if(rs.code === 200) {
        total.value = rs.page?.totalResult || 0
        tableForm.value.currentPage = rs.page?.currentPage || 0
        
        if(rs.payload.length) {
            tabHeadData.value = JSON.parse(rs.payload[0].entryDetail)
        }

        let entryDetailData = rs.payload
        entryDetailData.forEach((el: any) => {
            if(el.entryDetail) {
                el.entryDetail = JSON.parse(el.entryDetail);
                el.entryDetail.forEach((item: any, idx: any) => {
                    el[`title${idx}`] = item.value
                })
            }
        });

       
        dataList.value = entryDetailData
        nextTick(()=>{
            toSiginUpRef.value.search()
        })
    }
}
onBeforeMount(() => {
    getDetailData() 
})
</script>

<style lang="scss" scoped>

</style>
